<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/adminlogin.css" >
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>

</head>
<body>
<div class="wrap">
    <img src="/static/img/login.jpg" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput"  type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="gb" class="registerPage">
    <div class="registerDiv">
        <form class="layui-form" action="">

            <div class="registerbox-title">用户注册中心</div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="Username" required lay-verify="required" placeholder="请输入账号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="Password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off"
                           class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="passwords" id="Passwords" required lay-verify="pwd" placeholder="请再次输入密码"
                           autocomplete="off" class="layui-input" id="pass2">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block" id="xb">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="rid"  class="layui-select" id="roleSelect">
                        <option value="">请选择...</option>
                        <option value="2">员工</option>
                        <option value="1">管理员</option>
                    </select>
                </div>
            </div>
            <%--状态--%>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="open" id="status" lay-skin="switch" lay-text="ON|OFF">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-upload" style="margin-left: 90px">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list" style="margin:10px -3px;">

                        <img class="layui-upload-img"
                             width="100px" height="100px" style="border-radius: 50%" id="demo1" src="${pageContext.request.contextPath}/static/img/login.jpg">
                        <p id="demoText"></p>
                    </div>
                    <!--上传返回的图片地址-->
                    <input type="hidden" name="avatarUrl" id="uploadImg" value="">
                </div>

            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '${pageContext.request.contextPath}/uploadLayuiFile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

    var $;
    layui.use(['layer','jquery'],function () {
        var layer = layui.layer;
        $=layui.jquery;
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
        createCode('#loginCode');
    })
    // 页面初始化生成验证码

    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (var i = 0;i < codeLength; i++){
            // 随机数索引
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }
    // 校验验证码、用户名、密码
    function validateCode(inputID,codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length<=0){
            layer.alert("验证码不能为空");
            return false;
        }
        if (inputCode != cardCode){
            layer.alert("请输入正确验证码");
            return false;
        }
        return true;
    }
    // 登录流程
    function login() {
        if (!validateCode('#loginCard','#loginCode')){
            //阻断提示
        }else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.loginUsername = loginUsername;
            params.loginPassword = loginPassword;
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            $.ajax({
                type:'post',
                data:params,
                url:'${pageContext.request.contextPath}/login',
                success:function (data) {
                    alert(JSON.stringify(data));
                },
                error:function () {
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                }
            });
        }
    }
    // 注册流程
    function register() {
        layer.open({
            type:'1',
            content:$('.registerPage'),
            title:'注册',
            area:['430px','400px'],
            btn:['注册','重置','取消'],
            closeBtn:'1',
            btn1:function (index,layero) {
                //注册回调
                layer.close(index);
                let Username = $('#Username').val();
                let Password = $('#Password').val();
                let Passwords = $('#Passwords').val();
                let rid = $('#roleSelect option:selected').val();
                let sex=$('#xb input[name="sex"]:checked ').val()//获取选中的男女
                let status=$.trim($('#status').is(":checked"));
                let params = {};
                params.Username = Username;
                params.Password = Password;
                params.Passwords = Passwords;
                params.rid = rid;
                params.sex = sex;
                params.status = status;
                var registerLoadIndex = layer.load(2);
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/add',
                    data: params,
                    success:function (ret) {
                        if (ret.data == true){
                            layer.close(registerLoadIndex);
                            layer.msg(data);
                        }
                    },
                    error:function () {
                        layer.close(registerLoadIndex);
                        layer.alert("请求超时！")
                    }
                });
            },
            btn2:function (index,layero) {
                //重置回调
                var registerUsername = $('#registerUsername').val("");
                var registerPassword = $('#registerPassword').val("");
                var registerWellPassword = $('#registerWellPassword').val("");
                // 防止注册页面关闭
                return false;
            },
            btn3:function (index,layero) {
                //取消回调
            }
        })
    }
</script>
</body>


</html>

